import React, { VFC, useEffect, useState } from "react"
import { Input, Button, Popconfirm, TablePaginationConfig, message, Table } from 'antd';
import { getMemberList, delMember} from '@services/index';
import { GetDIC } from '@api/index'

import Edit from './edit';
import MySelect from './mySelect';
import PageContent from '@layout/PageContent';
import { FILe_URL } from "@tools/config";

type EType = React.MouseEvent<HTMLElement, MouseEvent> | React.SetStateAction<boolean>

const Group:VFC = () => {
    const [isVisible, setIsVisible] = useState<boolean>(false);
    const [dataInfo, setDataInfo] = useState<any>(null);
    const [memberName, setMemberName] = useState<string|undefined>(undefined);
    const [teamId, setTeamId] = useState<string|undefined>(undefined);
    const DIC_sexType = GetDIC('sexType');
    const [dataList, setDataList] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false)
    const [pagination, setPagination] = useState<TablePaginationConfig>({
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共 ${total} 条 `,
    });

    useEffect(()=>{
        if(!memberName&& !teamId) initData();
    },[memberName, teamId]); 
    // 获取列表 数据
    const initData= async () =>{
        setLoading(true)
        try{
            const { data, status } = await getMemberList({
                pageNum:pagination.current,
                pageSize:pagination.pageSize,
                name: memberName,
                teamId: teamId,
            })
            if(status === '0'){
                const {list, total} = data
                setDataList(list);
                setPagination({
                    ...pagination,
                    total
                });
            }
        }finally{
            setLoading(false)
        }
    }
    // 编辑
    const handleEdit = (type: string,e?: EType) => {
        if(type == 'add') {
            setDataInfo(null);
        }else{
            setDataInfo(e);
        }
        setTimeout(()=>{
            setIsVisible(true)
        })
    }
    // 删除行信息
    const del = async (id:string) => {
        const { status } = await delMember({ id });
        if(status==='0'){
            message.success('删除成功')
            initData();
        }
    }

    // 触发分页
    const onTableChange = (page:TablePaginationConfig) => {
        pagination.current = page.current
        pagination.pageSize = page.pageSize
        setPagination({...pagination})
        initData();
    }
    const renderSearch = () => (
        <div className="box-search dflex br2">
            <div className="search-items dflex">
                <div className="_items dflex">
                    <label>小组</label>
                    {<MySelect onChange={(e:any) => setTeamId(e)} />}
                </div>
                <div className="_items dflex">
                    <label>姓名</label>
                    <Input onChange={e=>setMemberName(e.target.value)} value={memberName} />
                </div>
            </div>
            <div className="btns">
                <Button type="primary" onClick={initData}>查询</Button>
                <Button className="mgL10" onClick={() => handleEdit('add')}>添加</Button>
            </div>
        </div>
    )
    // 表格列名称
    const columns:any = [
        { title: '姓名', dataIndex: 'name'},
        { title: '性别', dataIndex: 'sex', render: (text:string)=> (DIC_sexType[text]) },
        { title: '年龄', dataIndex: 'age' },
        { title: '所属小组', dataIndex: 'teamName'},
        { title: '头像', dataIndex: 'headPic',  render: (text:string)=> (text?<img style={{maxWidth: 50, maxHeight: 50}} src={`${FILe_URL}${text}`}/>:'-') },
        { title: '操作', dataIndex: 'operation', render: (_: unknown, record: any) => (
            <>
                <a onClick={() => handleEdit('edit',record)} style={{ marginRight: 8 }}>编辑</a>
                <Popconfirm title="确定删除此信息?" okText="确定" cancelText="取消" onConfirm={()=>del(record.id)}><a>删除</a></Popconfirm>
            </>
        )}
    ]
    return (
        <>
            {renderSearch()}
            <PageContent title="组员管理">
                <Table 
                    rowKey={({id})=> id}
                    bordered
                    columns={columns} 
                    dataSource={dataList}
                    onChange={onTableChange}
                    pagination={pagination}
                    loading={loading}
                    scroll={{ x: 0 }}
                />
            </PageContent>
            {isVisible && <Edit dataInfo={dataInfo} isVisible={isVisible} onCancel={()=>{
                setIsVisible(false)
                initData()
                setMemberName(undefined)
                setTeamId(undefined)
            }} />}
        </>
    )
}
export default Group
